<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>个人博客</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/normalize.css" />
  </head>
  <body>
    <div class="main-wrapper">
      <!--头部信息-->
      <header>
        <nav>
          <div class="logo">
            <a href="#">王小窝</a>
          </div>
          <ul>
            <li>
              <a href="#" class="active">首页</a>
            </li>
            <li>
              <a href="#">关于</a>
            </li>
            <li>
              <a href="#">项目</a>
            </li>
            <li id="slidebar_trigger">
              <a href="#">更多</a>
            </li>
          </ul>
        </nav>
        <div id="banner">
          <div class="inner">
            <h1>Web Developer</h1>
            <p class="sub-heading"> 一个探索自己是否有趣的人 </p>
            <button>关于我</button>
            <div class="more">
              <a href="#">更多&gt;&gt;</a>
            </div>
          </div>
        </div>
      </header>
      <!--主题内容-->
      <div class="content">
        <section class="green-section">
          <div class="wrapper">
            <div>
              <h2>小案例</h2>
              <div class="hr"></div>
              <p class="sub-heading"> 存放一些小案例，激发自己的所思与所想 </p>
            </div>
            <div class="icon-group">
              <span class="icon"><a href="#">HTML or CSS</a></span>
              <span class="icon"><a href="#">JavaScript</a></span>
              <span class="icon"><a href="#">工程构建</a></span>
            </div>
          </div>
        </section>
        <section class="gray-section">
          <div class="article-preview clearfix">
            <div class="img-section">
              <img src="img/pic01.jpg" alt="" />
            </div>
            <div class="text-section">
              <h2>编程之刻意练习</h2>
              <p>
                <a href="http://blog.csdn.net/laokdidiao/article/details/51442985">1、走出自己的舒适区，发现自己的不足，充分利用时间。</a>
              </p>
            </div>
          </div>
          <div class="article-preview clearfix">
            <div class="text-section">
              <h2>学习编程的重要法则</h2>
              <p>
                <a href="#">不断练习，不断训练，自己写代码，看别人的代码，再写代码，持续不断，不写代码就不会编程</a>
              </p>
            </div>
            <div class="img-section">
              <img src="img/pic02.jpg" alt="" />
            </div>
          </div>
          <div class="article-preview clearfix">
            <div class="img-section">
              <img src="img/pic03.jpg" alt="" />
            </div>
            <div class="text-section">
              <h2>自我驱动力</h2>
              <p>
                <a href="https://www.douban.com/note/327249116/">首先就是要学会自信，学会好好爱自己。大部分 拖延患者都或多或少有点不自信，缺乏安全感。每 个人都有一个安全界限，超过了这个界限就会没有 安全感，所以常拒绝改变，哪怕这种改变会让我们 变得更好。其实这就是不自信，不相信自己能做的 更好，即对自我价值的认可度不高。</a>
              </p>
            </div>
          </div>
        </section>
        <section class="purple-section">
          <div class="heading-wrapper">
            <h2>项目展示</h2>
            <div class="hr"></div>
            <div class="sub-heading">
              <p>菜鸟成长日志</p>
            </div>
          </div>
          <div class="card-group">
            <div class="card">
              <h3>移动商城</h3>
              <p>内容1</p>
            </div>
            <div class="card">
              <h3>标题1</h3>
              <p>内容1</p>
            </div>
            <div class="card">
              <h3>标题1</h3>
              <p>内容1</p>
            </div>
            <div class="card">
              <h3>标题1</h3>
              <p>内容1</p>
            </div>
            <div class="card">
              <h3>标题1</h3>
              <p>内容1</p>
            </div>
            <div class="card">
              <h3>标题1</h3>
              <p>内容1</p>
            </div>
          </div>
        </section>
      </div>
      <!--尾部信息-->
      <footer>
        <ul class="share-group">
          <li>
            <a href="#">GitHub</a>
          </li>
          <li>
            <a href="#">博客园</a>
          </li>
          <li>
            <a href="#">其他</a>
          </li>
          <li>
            <a href="#">其他</a>
          </li>
        </ul>
        <div class="copy">
          <p>&copy; ZzHao - 2017</p>
        </div>
      </footer>
    </div>
  </body>
</html>